<script lang="ts" setup>
import { getPatientOrderLogisticsByIdAPI } from '@/apis/order'
import type { GetPatientOrderLogisticsData } from '@/types/order'
import type { DrivingData } from '@/types/qqmap'
import { ref } from 'vue'

// 1. 获取页面参数
const props = defineProps<{
  orderId: string // 药品订单ID
}>()

// 2. 获取物流信息
const orderLogistics = ref<GetPatientOrderLogisticsData>()
const getPatientOrderLogistics = async () => {
  // 发送请求并保存数据
  const res = await getPatientOrderLogisticsByIdAPI(props.orderId)
  orderLogistics.value = res.data
  // 获取物流信息后，再计算驾车路线规划
  getDrivingRoute()
}
getPatientOrderLogistics()

// 3. 地图配置
// 中心点经纬度
const latitude = ref(39.909)
const longitude = ref(116.39742)
// 缩放比例
const scale = ref(11)
// 地图标记点
const markers = ref<UniHelper.MapMarker[]>([
  {
    id: 1,
    longitude: 116.29742,
    latitude: 39.909,
    iconPath: '/static/images/start.png',
    width: 50,
    height: 60,
  },
  {
    id: 2,
    longitude: 116.39742,
    latitude: 39.909,
    iconPath: '/static/images/car.png',
    width: 50,
    height: 30,
  },
  {
    id: 3,
    longitude: 116.49742,
    latitude: 39.909,
    iconPath: '/static/images/end.png',
    width: 50,
    height: 60,
  },
])
// 地图路径
const polyline = ref<UniHelper.MapPolyline[]>([
  {
    points: [
      {
        latitude: 39.909,
        longitude: 116.29742,
      },
      {
        latitude: 39.909,
        longitude: 116.39742,
      },
      {
        latitude: 39.909,
        longitude: 116.49742,
      },
    ],
    color: '#58c16c',
    width: 6,
    borderColor: '#2f693c',
    borderWidth: 1,
    arrowLine: true,
  },
])

// 4. 驾车路线规划
const getDrivingRoute = async () => {
  uni.request({
    method: 'GET',
    url: 'https://apis.map.qq.com/ws/direction/v1/driving/',
    // #ifdef H5
    // @ts-ignore
    url: '/ws/direction/v1/driving/',
    // #endif
    data: {
      key: '2NUBZ-46AKW-APLRD-3CLQO-DK4C2-RXB5Y', // 腾讯地图key密钥（用自己的）
      from: `39.894772,116.321668`, // 起点坐标
      to: '39.902781,116.427171', // 终点坐标
    },
    success: (res) => {
      // 获取驾车路线规划数据
      const result = (res.data as DrivingData).result
      const route = result.routes[0]
      const coors = route.polyline
      const pl = []
      // 坐标解压（返回的点串坐标，通过前向差分进行压缩）
      const kr = 1000000
      for (let i = 2; i < coors.length; i++) {
        coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr
      }
      // 将解压后的坐标放入点串数组pl中
      for (let i = 0; i < coors.length; i += 2) {
        pl.push({ latitude: coors[i], longitude: coors[i + 1] })
      }

      polyline.value.push({
        points: pl, // 解压后的坐标数组
        color: '#58c16c', // 线颜色
        width: 6, // 线宽
        borderColor: '#2f693c', // 线框颜色
        borderWidth: 1, // 线框宽
        arrowLine: true, // 是否显示箭头
      })
    },
  })
}
</script>

<template>
  <view class="timeline-page">
    <!-- 地图组件 -->
    <map
      id="map"
      class="uni-map"
      :latitude="latitude"
      :longitude="longitude"
      :scale="scale"
      :markers="markers"
      :polyline="polyline"
    ></map>
    <!--   物流信息 -->
    <cover-view class="timeline-meta">
      <cover-view class="status">订单{{ orderLogistics?.statusValue }}</cover-view>
      <cover-view class="extra">
        预计{{ orderLogistics?.estimatedTime }}送达
        {{ orderLogistics?.name }}
        {{ orderLogistics?.awbNo }}
      </cover-view>
    </cover-view>
    <view class="timeline-detail">
      <view class="title">物流详情</view>
      <view class="timeline">
        <view class="line">
          <view class="badge text">收</view>
          <view class="content"> 收货地址：广东省广州市大华区明离路科技园880号 </view>
        </view>
        <view v-for="item in orderLogistics?.list" :key="item.id" class="line">
          <!-- 1已发货 2已揽件 3 运输中 4 派送中 5已签收 -->
          <view class="badge dot" v-if="item.status <= 3"></view>
          <view class="badge icon" v-else-if="item.status === 4">
            <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-truck" />
          </view>
          <view class="badge icon" v-else-if="item.status === 5">
            <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-checked" />
          </view>
          <view class="label">{{ item.statusValue }}</view>
          <view class="content">{{ item.content }}</view>
          <view class="time">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
